const range = (size) =>
  Object.fromEntries(
    [...Array(size).keys()]
      .slice(1)
      .map((i) => [`${i}_${size}`, `${(i / size) * 100}%`])
  );

const generateSpacing = (num) => {
  return new Array(num)
    .fill(1)
    .reduce((cur, next, index) => ({ ...cur, [index]: `${index * 2}rpx` }), {});
};

module.exports = {
  prefixer: false,
  separator: "_",
  compile: false,
  globalUtility: false,
  darkMode: "media",
  corePlugins: {
    preflight: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false,
    space: false,
    placeholderColor: false,
    placeholderOpacity: false,
    transitionProperty: false,
  },
  exclude: [/([0-9]{1,}[.][0-9]*)$/],
  theme: {
    colors: {
      green: {
        theme: "#27AE60",
      },
    },
    spacing: {
      ...generateSpacing(201),
    },
    fontSize: (theme) => theme("spacing"),
    borderWidth: (theme) => theme("spacing"),
    lineHeight: (theme) => theme("spacing"),
    translate: (theme) => theme("spacing"),
    inset: (theme) => theme("spacing"),
    borderRadius: (theme) => theme("spacing"),
    width: (theme) => ({
      auto: "auto",
      full: "100%",
      screen: "100vw",
      ...Object.assign(...[2, 3, 4, 5, 6, 12].map(range)),
      ...theme("spacing"),
    }),
    height: (theme) => ({
      auto: "auto",
      full: "100%",
      screen: "100vh",
      ...Object.assign(...[2, 3, 4, 5, 6, 12].map(range)),
      ...theme("spacing"),
    }),
    maxHeight: {
      full: "100%",
      screen: "100vh",
    },
  },
};
